$(function () {
  // 2.初始化富文本编辑器
  initEditor()

  // 3.裁剪区域
    // 1.初始化图片裁剪器
    const $image = $("#image");

    // 2.裁剪选项
    let options = {
      aspectRatio: 400 / 280,
      preview: ".img-preview",
    };

    //  3.初始化裁剪区域
    $image.cropper(options);

    const layer = layui.layer;
    const form = layui.form;

  // 1.初始化文章列表并渲染到第二行的选择框内
  initCate();
  function initCate() {
    $.ajax({
      type: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);

        let htmlStr = template("tpl-cate", res);
        $("#cate_id").html(htmlStr);
        // layui.form 不能动态渲染表单，动态插入的结构，需要调用form.render()方法
        form.render("select");
      },
    });
  }

  // 4.点击 选择封面按钮，触发file选择文件
  $('#chooseImage').on('click',function(){
    $('#coverFile').click()
  })

  // 5.监听file的change事件
  $('#coverFile').on('change',function(e){
    // debugger
    // 拿到当前图片
    const files = e.target.files

    // 判断是否选择图片
    if(files.length === 0) return layer.msg('请选择图片')

    // 根据选择的图片创建对应图片的url地址
    const imgUrl = URL.createObjectURL(files[0])

    // 为裁剪区域重新设置图片
    $image
    .cropper('destroy') // 销毁旧的裁剪区域
    .attr('src', imgUrl) // 重新设置图片路径
    .cropper(options)  // 重新初始化裁剪区域
  })


  // 6.定义发布文章状态
  let art_state = '已发布' //只有两种状态：已发布/草稿

  // 7.当点击草稿按钮时，调用发布的点击事件，并修改状态
  $('#btnSave').on('click',function(){
    art_state = '草稿'
  })

  // 8.表单提交
  $('#formPub').on('submit',function(e){
    // 1.阻止默认提交
    e.preventDefault()

    // 2.new一个FormData对象
    // FormData对象 是原生对象 
      // 将表单元素作为参数传入给FormData对象
      // $(this)[0] 就是将jq元素转成原生：转原生后面跟着中括号0 固定写法
    const fd = new FormData($(this)[0]) 


    // 3.把当前的状态，加入到formdata对象中
      // 如果想formdata对象中的属性，需要通过Formdata对象中的get方法去获取
    fd.append('state', art_state)
    // console.log(fd.get('state'))

    // 4.把裁剪后的图片，输出成一个文件对象
      // 4.1创建一个Canvas画布
      $image.cropper('getCroppedCanvas',{
        width:400,
        height:280
      }).toBlob(function(blob){
        fd.append('cover_img',blob)
        // console.log(fd.get('cover_img'))
        publishArticle(fd)

      })
      // 吐过通过fd对象去获取输出好的文件对象，必须要在回调函数内获取
      // console.log(fd.get('cover_img')) // null 
  })

  // 9.定义发布的ajax请求函数
  function publishArticle(f){
    $.ajax ({
      type:'POST',
      url:'/my/article/add',
      data:f,
      // 注：如果是发起携带FormData对象的ajax请求必须添加以下两个属性
      contentType:false,
      processData:false,
      success:function(res) {
        if(res.status !== 0) return layer.msg('发布文章失败')
        layer.msg('发布文章成功')
        
        // 或
        // $('.layui-nav-child dd:nth-child(2)', window.parent.document) 
        // 这句话的意思 就是在当前文档的父级文档中查找 括号中写的选择器 
        // $('.layui-nav-child dd:nth-child(2)', window.parent.document)
            // .addClass('layui-this')
            // .siblings()
            // .removeClass('layui-this')

            
        // 发布文章成功后，跳转到文章列表页面
        window.parent.click()
      }
    })
  }
});
